Cómo afectan las diferentes declaraciones de estilo a la Cabecera: Header (h1)

Para ello hay que calcular la tupla (A,B,C,D) ganadora de todas las reglas CSS que compiten. A tiene el máximo peso y D, el mínimo. Siendo:

  1. La declaración de estilo: #caja header h1 {background-color: red;} tiene una puntuación de (0,1,0,2).
  2. La declaración de estilo: #caja .cabecera h1 {background-color: blue;} tiene una puntuación de (0,1,1,1).
  3. La declaración de estilo: header h1 {background-color: green;} tiene una puntuación de (0,0,0,2)
  4. La declaración de estilo: h1 {background-color: yellow;} tiene una puntuación de (0,0,0,1).

Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
(1)#caja header h1 { color: red; }
(2)#caja .cabecera h1 { color: blue; }
(3)header h1 { color: green; }
(4)h1 { color: yellow; }
</style>
</head>
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>

El estilo número 2 es el ganador:

Cabecera: header